<template>
    <div>
        <hd-tab :tabs="tabs" />
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>轮播列表</span>
            </div>
            <el-table :data="swipers" border size="mini" style="width: 100%">
                <el-table-column label="ID" prop="id" width="80">
                </el-table-column>

                <el-table-column label="地址" prop="image"> </el-table-column>
                <el-table-column label="标题" prop="title">
                </el-table-column>
                <el-table-column
                    #default="{ row: swiper }"
                    label="操作"
                    width="200"
                >
                    <el-button-group>
                        <el-button
                            size="mini"
                            type="primary"
                            @click="edit(swiper)"
                            >编辑</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="del(swiper)"
                            >删除</el-button
                        >
                    </el-button-group>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>预览</span>
            </div>
            <el-carousel :interval="4000" height="200px" type="card">
                <el-carousel-item v-for="(item, index) in swipers" :key="index">
                    <h3 class="medium">
                        <img :src="item.image" alt="" />
                    </h3>
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script>
import tabs from "./tabs";

export default {
    route: { name: "admin.swiper.index", meta: { title: "轮播列表" } },
    data() {
        return {
            swipers: [],
            tabs,
        };
    },
    async created() {
        await this.load();
    },
    methods: {
        async load() {
            this.swipers = await this.axios.get(`admin/swiper`);
        },
        del(swiper) {
            this.$confirm("确定删除吗？", "提示").then(async () => {
                await this.axios.delete(`admin/swiper/${swiper.id}`);
                this.swipers.splice(this.swipers.indexOf(swiper), 1);
            });
        },
        edit(swiper) {
            this.$router.push({
                name: "admin.swiper.edit",
                params: { id: swiper.id },
            });
        },
    },
};
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
